<script setup lang="ts">
import {suffixEnListArr,suffixZhListArr} from "~/const/Lists";

const activeTab = ref('1');
const key= ref('');
const enDomain=computed(()=>key.value?suffixEnListArr.filter((item:any)=>item.domain?.includes?.(key.value)):suffixEnListArr)
const zhDomain=computed(()=>key.value?suffixZhListArr.filter((item:any)=>item.domain?.includes?.(key.value)):suffixZhListArr)
</script>

<template>
<div>
  <div class="w-[1200px] mx-auto bg-white px-10 py-5 relative">
    <div class="text-red-400 mb-5">
      友情提示：域名注册价格会随市场行情波动，具体价格以实际查询为准。
    </div>
    <div class="fixedInput">
      <el-input v-model="key" clearable placeholder="搜索域名"></el-input>
    </div>

    <el-tabs v-model="activeTab">
      <el-tab-pane label="英文域名" name="1">
        <el-table
            :data="enDomain"
            tooltip-effect="dark"
            style="width: 100%"
            align="center"
            stripe
            height="500px"
            v-if="enDomain.length>0"
        >
          <el-table-column label="域名">
            <template #default="scope">{{ scope.row?.domain }}</template>
          </el-table-column>
          <el-table-column label="注册价格">
            <template #default="scope">
              <div v-if="scope.row.price=='--'||scope.row.price==''">
                <span class="text-[var(--el-color-primary)]">{{ scope.row.price }}</span>
              </div>
              <div v-else>
                <span class="text-gray-400 line-through mr-2">¥{{ scope.row.price[0] }}</span>
                <span class="text-[var(--el-color-primary)]">¥{{ scope.row.price[1] }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="续费价格">
            <template #default="scope"><span class="text-[var(--el-color-primary)]">¥{{ scope.row.price1 }}</span></template>
          </el-table-column>
          <el-table-column label="转入价格">
            <template #default="scope"><span class="text-[var(--el-color-primary)]">¥{{ scope.row.price2 }}</span></template>
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template #default="scope">
              <el-button class="ml-1">注册</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="中文域名" name="2">
        <el-table
            :data="zhDomain"
            tooltip-effect="dark"
            style="width: 100%"
            align="center"
            height="500px"
            stripe
        >
          <el-table-column label="域名">
            <template #default="scope">{{ scope.row.domain }}</template>
          </el-table-column>
          <el-table-column label="注册价格">
            <template #default="scope">
              <div v-if="scope.row.price=='--'">
                <span class="text-[var(--el-color-primary)]">{{ scope.row.price }}</span>
              </div>
              <div v-else>
                <span class="text-gray-400 line-through mr-2">{{ scope.row.price?.[0] }}</span>
                <span class="text-[var(--el-color-primary)]">{{ scope.row.price?.[1] }}</span>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="续费价格">
            <template #default="scope"><span class="text-[var(--el-color-primary)]">¥{{ scope.row.price1 }}</span></template>
          </el-table-column>
          <el-table-column label="转入价格">
            <template #default="scope"><span class="text-[var(--el-color-primary)]">¥{{ scope.row.price2 }}</span></template>
          </el-table-column>
          <el-table-column
              label="操作"
          >
            <template #default="scope">
              <el-button class="ml-1">注册</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</div>
</template>

<style scoped lang="scss">
.fixedInput{
  position: absolute;
  right: 40px;
  top: 70px;
  width: 400px;
  z-index: 2;
}
</style>